<template>
  <div>
    <AdTable @register="register" :dataSource="moduleTreeNodesRef">
      <template #toolbar>
        <a-button type="primary" @click="expandAll">
          <Icon icon="bi:arrows-expand" />{{ t('common.expandAll') }}
        </a-button>
        <a-button type="primary" @click="collapseAll">
          <Icon icon="bi:arrows-collapse" />{{ t('common.collapseAll') }}
        </a-button>
      </template>

      <template
        #customFilterDropdown="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
      >
        <div style="padding: 8px">
          <Input
            ref="searchInput"
            :placeholder="`${t('common.searchText')} ${column.title}`"
            :value="selectedKeys[0]"
            style="display: block; width: 188px; margin-bottom: 8px"
            @change="(e) => setSelectedKeys(e.target.value ? [e.target.value] : [])"
            @press-enter="handleSearch(selectedKeys, confirm, column.dataIndex)"
          />
          <Button
            type="primary"
            size="small"
            style="width: 90px; margin-right: 8px"
            @click="handleSearch(selectedKeys, confirm, column.dataIndex)"
          >
            <template #icon><SearchOutlined /></template>
            {{ t('common.searchText') }}
          </Button>
          <Button size="small" style="width: 90px" @click="handleReset(clearFilters)">
            {{ t('common.resetText') }}
          </Button>
        </div>
      </template>
      <template #customFilterIcon="{ filtered }">
        <search-outlined :style="{ color: filtered ? '#108ee9' : undefined }" />
      </template>

      <template #bodyCell="{ column, record }">
        <template v-if="column?.key === 'action'">
          <TableAction  stopButtonPropagation
            :actions="[
              {
                icon: 'grommet-icons:action',
                tooltip: t('routes.system.authorization.module.moduleFunctions'),
                auth: 'Root.Admin.Auth.Module.ReadFunctions', // 权限控制
                onClick: handleReadFunctions.bind(null, record),
              },
            ]"
          />
        </template>
      </template>
    </AdTable>

    <ModuleFunctionDrawer @register="registerDrawer" />
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, watchEffect } from 'vue';
  import { Input, Button } from 'ant-design-vue';
  import { SearchOutlined } from '@ant-design/icons-vue';
  import { useI18n } from '@/hooks/web/useI18n';

  import { AdTable, useAdTable, TableAction } from '@/components/AdTable';
  import Icon from '@/components/Icon/Icon.vue';

  import { ModuleTreeNode, columns, getModuleTreeNodes, searchInput } from './module.data';

  import { useDrawer } from '@/components/Drawer';
  import ModuleFunctionDrawer from './ModuleFunctionDrawer.vue';
import { VxeImagePreview } from 'vxe-pc-ui';

  defineOptions({ name: 'ModulePage' });

  const state = reactive({
    searchText: '',
    searchedColumn: '',
  });

  const { t } = useI18n();
  const moduleTreeNodesRef = ref<ModuleTreeNode[]>([]);

  const [registerDrawer, { openDrawer }] = useDrawer();

  watchEffect(async () => {
    moduleTreeNodesRef.value = await getModuleTreeNodes();
  });

  const [register, { expandAll, collapseAll }] = useAdTable({
    title: t('routes.system.authorization.module.moduleList'),
    isTreeTable: true,
    childrenColumnName: 'Children',
    indentSize: 10,
    columns,
    // dataSource: getModuleTreeNodes(),
    rowKey: 'Id',
    // 斑马纹
    striped: false,
    // 是否可拖拽列
    canColDrag: false,
    // 使用搜索表单
    useSearchForm: false,
    // 显示表格设置工具
    showTableSetting: true,
    //表格设置项
    tableSetting: { redo: true, size: true, setting: true, fullScreen: true },
    // 是否显示表格边框
    bordered: false,
    // 是否显示序号列
    showIndexColumn: false,
    // 操作列
    actionColumn: {
      width: 80,
      title: t('common.actionText'),
      dataIndex: 'action',
      fixed: 'right',
    },
    expandRowByClick: true,
  });

  /** 处理读取模块功能 */
  async function handleReadFunctions(record: any) {
    openDrawer(true, {
      record,
    });
  }

  const handleSearch = (selectedKeys, confirm, dataIndex) => {
    confirm();
    state.searchText = selectedKeys[0];
    state.searchedColumn = dataIndex;
  };

  const handleReset = (clearFilters) => {
    clearFilters({ confirm: true });
    state.searchText = '';
  };
</script>
